<template>
  <div>
    <div>
      <el-form class="form-container" :model="form">
        <el-form-item label="关键字" label-width="60px" style="width: 280px;" inline>
          <el-input placeholder="请输入商品分类名称关键字" v-model="form.keyword"></el-input>
        </el-form-item>
        <el-form-item label="分类级别" label-width="60px">
          <el-radio-group v-model="form.level">
            <el-radio-button label="不限" value="0"/>
            <el-radio-button label="一级" value="1"/>
            <el-radio-button label="二级" value="2"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" label-width="60px">
          <el-radio-group v-model="form.delStatus">
            <el-radio-button label="不限" value="0"/>
            <el-radio-button label="正常" value="1"/>
            <el-radio-button label="停用" value="9"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="inline-form-item">
          <el-button type="primary" color="green" :icon="Search" title="商品分类查询"
                     @click="queryPageList"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: right;margin-bottom: 2px;">
      <el-button type="primary" :icon="Plus" title="创建商品分类" @click="showCreateDialog"></el-button>
    </div>
    <el-table :data="tableData" stripe border style="width: 100%" class="el-table" :highlight-current-row="true"
              empty-text="未查询到任何商品分类数据">
      <el-table-column label="序号" header-align="center" width="60" align="right">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="分类名称" header-align="center" width="100"/>
      <el-table-column prop="level" label="分类级别" header-align="center" align="center">
        <template #default="scope">
          <span v-if="1==scope.row.level">
            <span>一级分类</span>
          </span>
          <span v-else-if="2==scope.row.level">
            <span>二级分类</span>
          </span>
          <span v-else>
            <span style="color: gold;">未知</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="分类状态" header-align="center" align="center">
        <template #default="scope">
					<span v-if="1==scope.row.delStatus">
						<span style="color: blue;">正常</span>
					</span>
          <span v-else-if="9==scope.row.delStatus">
						<span style="color: red;">停用</span>
					</span>
          <span v-else>
						<span style="color: gold;">未知</span>
					</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center">
        <template #default="scope">
          <el-button type="info" :icon="ZoomIn" title="详情" color="green"
                     @click="showDetailsDialog(scope.$index)"></el-button>
          <el-button type="primary" :icon="Edit" title="修改" @click="showModifyDialog(scope.$index)"></el-button>
          <el-button type="danger" :icon="Delete" title="删除" @click="deleteCategory(scope.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <PaginationUI ref="paginationUIRef" @query:page="handlerQueryPage"></PaginationUI>
    <!-- 创建商品分类对话框 -->
    <CreateDialog ref="createDialog" :categories="superCategories"></CreateDialog>
    <!-- 修改商品分类对话框 -->
    <ModifyDialog ref="modifyDialog" :categoryId="categoryId"></ModifyDialog>
    <!-- 显示商品分类详细信息-->
    <DetailsDialog ref="detailsDialog"></DetailsDialog>
  </div>
</template>

<script setup>
//导入图标
import {Delete, Edit, Plus, Search, ZoomIn} from '@element-plus/icons-vue';
import {ref, onMounted} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus'
//创建商品分类对话框
import CreateDialog from './CreateDialog.vue';
//修改商品分类对话框
import ModifyDialog from './ModifyDialog.vue';
//显示商品分类详细信息
import DetailsDialog from './DetailsDialog.vue';
//导入分页查询的控件
import PaginationUI from "@views/common/PaginationUI.vue"
import apiUtils from '@/assets/js/api-utils.js';

const categoryId = ref(0);
//查询表单响应数据
const form = ref({
  level: '0',
  delStatus: '0',
  keyword: ''
});
const paginationUIRef = ref(null);
const tableData = ref([]);
let createDialog = ref(null);
let modifyDialog = ref(null);
let detailsDialog = ref(null);
//打开删除商品分类对话框
const deleteCategory = (rowIndex) => {
  let category = tableData.value[rowIndex];
  ElMessageBox.confirm(`确认要删除商品分类【${category.name}】吗?`, '删除商品分类',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    // 用户点击了“确定”
    await deleteById(category.id);
  }).catch(() => {
    // 用户点击了“取消”
    ElMessage.info(`已取消删除商品分类【${category.name}】`);
  });
}
const deleteById = async (id) => {
  let response = await apiUtils.category.delete({id});
  if (200 !== response.code) {
    ElMessage.error(response.message);
    return;
  }
  let success = response.data;
  if (success) {
    ElMessage.success('删除成功');
    await queryPageList();
  } else {
    ElMessage.warning('删除失败,记录不存在');
  }
}
//打开修改商品分类对话框
const showModifyDialog = (rowIndex) => {
  modifyDialog.value.dialogVisible = true;
  let category = {...tableData.value[rowIndex]};
  let id = category.id;
  modifyDialog.value.form = category;
}
//打开显示详细信息对话框
const showDetailsDialog =async (rowIndex) => {
  detailsDialog.value.dialogVisible = true;
  let categoryId = tableData.value[rowIndex].id;
  let response = await apiUtils.category.get({id: categoryId});
  if (200 !== response.code) {
    ElMessage.error(response.message);
    return;
  }
  detailsDialog.value.category = response.data;
}
//打开创建商品分类对话框
const showCreateDialog = () => {
  createDialog.value.dialogVisible = true;
}
const queryPageList = async () => {
  let params = {};
  let keyword = form.value.keyword
  if (keyword) {
    params.keyword = keyword;
  }
  let level = form.value.level;
  if ('0' !== level) {
    params.level = level;
  }
  let delStatus = form.value.delStatus;
  if ('0' !== delStatus) {
    params.delStatus = delStatus;
  }
  params.pageNum = paginationUIRef.value.currentPage;
  params.pageSize = paginationUIRef.value.pageSize;
  let response = await apiUtils.category.list(params);
  if (200 !== response.code) {
    ElMessage.error(response.message);
    return;
  }
  tableData.value = response.data.records;
  paginationUIRef.value.total = response.data.total;
  paginationUIRef.value.currentPage = response.data.current;
  paginationUIRef.value.pageSize = response.data.size;
}
/**
 * 查询一级商品分类列表
 */
const superCategories = ref([])
const querySuperCategories = async () => {
  //将每页显示记录条数设置较大的数,目的室是查询所有正在使用中的一级分类
  let params = {pageNum: 1, pageSize: 1000, level: 1, delStatus: 1};
  let response = await apiUtils.category.list(params);
  if (200 !== response.code) {
    ElMessage.error(response.message);
    return;
  }
  superCategories.value = response.data.records;
}
/**
 * 分页查询响应数据
 * @returns {Promise<void>}
 */
const handlerQueryPage = async () => {
  await queryPageList();
}
onMounted(async () => {
  await querySuperCategories();
})
</script>
<style scoped>
.form-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;

}

.inline-form-item {
  margin-left: 20px;
}
</style>